<template>
  <ActivityPhonePreview>
    <div class="mobile_box">
        <div class="title_box">
          <!-- <el-icon><close-bold /></el-icon> -->
          <h3 class="title_r">签到活动标题</h3>
        </div>
        <div class="content_box">
          <div class="header">
            <div class="header_avatar"><el-avatar :size="38"> user </el-avatar></div>
            <div class="text_box">
              <div class="user_info">
                <p class="user_name">用户昵称</p>
                <p class="user_desc">您已连续签到<span style="color: #ff6b00">0</span>天</p>
              </div>
              <div class="text_right">
                <img class="text_ringht_img" src="@/assets/smartMarketing/calendar_icon.png" alt="" />
                签到
              </div>
            </div>
          </div>
          <div class="caleandar_box">
            <el-calendar ref="calendar">
              <template #header="{ date }">
                <div class="time_btn_box">
                  <el-icon @click="selectDate('prev-month')"><arrow-left /></el-icon>
                  <span>{{ date }}</span>
                  <el-icon @click="selectDate('next-month')"><arrow-right /></el-icon>
                  <div @click="selectDate('today')" class="today_box">回到今天</div>
                </div>
              </template>
              <template #dateCell="{ data }">
                <span class="isDateColor">{{ getDate(data) }}</span>
              </template>
            </el-calendar>
          </div>
          <div class="content_footer">
            <el-tabs class="tabs_box">
              <!-- 签到奖励 -->
              <el-tab-pane>
                <template #label>
                  <span style="display: inline-block; font-size: 14px">签到奖励</span>
                </template>
                <el-scrollbar height="130px">
                  <div class="content_prize" v-for="item in props.formInfo.sign_config" :key="item.stage_name">
                    <el-image v-if="item.prize_type == 1" style="width: 60px; height: 60px; margin-right: 10px; font-size: 65px" :src="item.entity.prize_url" fit="cover"
                      ><template #error
                        ><div>
                          <el-icon><icon-picture /></el-icon>
                        </div> </template
                    ></el-image>
                    <img v-else style="width: 60px; height: 60px; margin-right: 10px" src="@/assets/smartMarketing/red_envelope.png" alt="" />
                    <div class="content_prize_text">
                      <div v-if="item.prize_type == 1" class="prize_name">{{ item.entity.prize_title }}</div>
                      <template v-else>
                        <div v-if="item.red_bao.red_envelope_type == 1" class="prize_name">{{ item.red_bao.red_envelope_money || 0 }} 元红包</div>
                        <!-- <div v-else class="prize_name">{{ `${item.red_bao.red_envelope_money}-${item.red_bao.red_envelope_range_total}` }} 元拼手气红包</div> -->
                        <div v-else class="prize_name">拼手气红包</div>
                      </template>
                      <div class="prize_name">
                        {{ props.formInfo.sign_type == 1 ? '连续' : '累计' }}签到{{ item.sign_days || 0 }}天，已完成 <span style="color: #ff6b00">{{ item.sign_days || 0 }}</span> /{{ item.sign_days || 0 }}
                      </div>
                    </div>
                    <div class="content_prize_btn">已领取</div>
                  </div>
                </el-scrollbar>
              </el-tab-pane>
              <!-- 排行榜 -->
              <el-tab-pane>
                <template #label>
                  <span style="display: inline-block; font-size: 14px">签到排行榜</span>
                </template>
                <el-scrollbar height="300px">
                  <div class="content_prize" v-for="(item, index) in 5" :key="item">
                    <div class="left_info">
                      <div class="ranking">
                        <img v-if="index == 0" src="@/assets/smartMarketing/champion_icon.png" alt="" />
                        <img v-if="index == 1" src="@/assets/smartMarketing/runnerUp_icon.png" alt="" />
                        <img v-if="index == 2" src="@/assets/smartMarketing/secondRunnerUp_icon.png" alt="" />
                        <div v-if="index > 2" class="ranking_t">{{ index + 1 }}</div>
                      </div>
                      <el-avatar class="avatar" :size="30"> user </el-avatar>
                      <div class="content_prize_text">王燕子</div>
                    </div>
                    <div style="color: #774a1c; font-size: 12px"> 连续签到<span style="color: #ff6b00">73天</span> </div>
                  </div>
                </el-scrollbar>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
  </ActivityPhonePreview>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { Picture as IconPicture } from '@element-plus/icons-vue'
import ActivityPhonePreview from '../index.vue'


interface Props {
  formInfo: any
}
const props = withDefaults(defineProps<Props>(), {
  formInfo: () => []
})
const calendar = ref()
const selectDate = (val: string) => {
  calendar.value.selectDate(val)
}
console.log(props.formInfo)

const getDate = (val: string) => {
  const newDate = val.day.split('-')
  return newDate[2]
}

</script>
<style lang="scss" scoped>
:deep(.el-calendar__body) {
  padding: 8px 2px 20px;
  font-size: 10px;
}
:deep .el-calendar-table .el-calendar-day {
  // width: 36px;
  height: 34px;
}
:deep .el-calendar-table td {
  border: none;
}
:deep .el-calendar-day {
  display: flex;
  align-items: center;
  justify-content: center;
}

.isDateColor {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  font-size: 14px;
}
.DateColor {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  font-size: 14px;
}
:deep .el-tabs__nav-scroll {
  // padding: 0 15px;
}
.mobile_box {
  width: 100%;
  height: 100%;
  border-radius: 25px;
  background-color: #f3fafb;

  .title_box {
    display: flex;
    align-items: center;
    height: 38px;
    padding-left: 11px;
    background: #ffffff;
    border-radius: 1px;
    border: 1px solid #f5f5f5;
    font-size: 14px;
    .title_r {
      background: #ffffff;
      border-radius: 1px;
      border-bottom: 1px solid #f5f5f5;
      position: relative;
      text-align: center;
      font-size: 16px;
      font-family: STHeitiSC-Medium, STHeitiSC;
      font-weight: 500;
      color: #000000;
      height: 42px;
      line-height: 44px;
      text-align: center;
      position: absolute;
      top: 0;
      right: 0;
      text-align: center;
      width: 100%;
      z-index: 1;
    }
  }
  .content_box {
    padding: 10px 8px;
    background: #f8f8f8;
    background-image: url('@/assets/smartMarketing/signIn_bg.png');
    background-repeat: no-repeat;
    background-position: 50% -200px;
    .header {
      padding: 10px 5px 0;
      display: flex;
      .header_avatar {
        margin-right: 10px;
      }
      .text_box {
        flex: 1;
        display: flex;
        justify-content: space-between;
        .user_info {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 5px 0;

          font-size: 12px;
          .user_name {
            font-weight: 600;
            color: #603400;
          }
          .user_desc {
            color: #603400;
          }
        }
        .text_right {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 76px;
          height: 28px;
          background: #ff6b00;
          border-radius: 20px;
          border: 1px solid rgba(255, 255, 255, 0.6);
          font-family: STHeitiSC-Medium, STHeitiSC;
          font-size: 12px;
          font-weight: 500;
          color: #ffffff;
          .text_ringht_img {
            width: 14px;
            height: 14px;
            margin-right: 5px;
            vertical-align: middle;
          }
        }
      }
    }
    .caleandar_box {
      // margin-top: 12px;
      margin: 12px 5px;
      background: #ffffff;
      padding: 5px;
      border-radius: 8px;
      :deep(.el-calendar__header) {
        padding: 6px 0;
      }
      .time_btn_box {
        padding-left: 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex: 1;
        font-size: 14px;
        .el-icon {
          color: #c0c4cc;
        }
        .today_box {
          padding: 3px;
          border-radius: 3px;
          font-size: 11px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          cursor: pointer;
          color: #ffd34e;
          background-color: #fff4d4;
          line-height: 16px;
        }
      }
    }

    .content_footer {
      margin-top: 20px;
      border-radius: 8px 8px 0px 0px;
      color: #FF6B00;
      background-color: #FFFFFF;
      :deep(.el-tabs__header) {
        background: #FFF8E1;
        border-radius: 8px 8px 0px 0px;
      }
      :deep(.el-tabs__nav-wrap::after) {
        height: 1px;
        background: #F5F5F5;
      }

      .content_prize {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 12px;
        padding: 14px 0;

        line-height: 20px;
        background-color: #fff;
        border-bottom: 1px solid #f5f5f5;
        .left_info {
          display: flex;
          align-items: center;
          .ranking {
            width: 20px;
            height: 25px;
            img {
              width: 100%;
              height: 100%;
            }
            .ranking_t {
              width: 20px;
              height: 20px;
              line-height: 20px;
              text-align: center;
              background: #f5f5f5;
              border-radius: 50%;
            }
          }
          .avatar {
            margin: 0 10px;
          }
          .content_prize_text {
            font-size: 12px;
            line-height: 18px;
          }
        }

        .content_prize_btn {
          width: 66px;
          height: 24px;
          display: flex;
          border-radius: 4px;
          font-size: 12px;
          justify-content: center;
          align-items: center;
          color: #fff;
          background-color: #cccccc;
        }
      }
    }
  }
}
.tabs_box {
  :deep .el-tabs__item {
    margin: 0 45px;
  }
}
.prize_name {
  font-size: 12px;
  width: 100%;
  line-height: 16px;
  padding-top: 2px;
  font-size: 12px;
}
</style>
